<template>
  <div id="container" class="container">

    <h3 class="title"><span />栏目列表</h3>
    <el-tabs v-model="activeName" class="tabs" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in langList"
        :key="item.id"
        :label="item.lang"
        :name="item.lang"
      />
    </el-tabs>
    <div class="content">
      <el-button
        type="primary"
        class="add six"
        icon="el-icon-plus"
        style="margin-bottom:15px;margin-left:15px"
        size="small"
        @click="goAdd"
      >添加一级栏目</el-button>
      <el-table
        ref="refTable"
        :data="orderData"
        row-key="id"
        :indent="30"
        @row-click="expandChange"
      >
        <el-table-column label="ID" width="100px" prop="id" />
        <el-table-column label="栏目名称" prop="title" align="left" />
        <el-table-column label="栏目地址" prop="fullUrl" align="left" show-overflow-tooltip />
        <el-table-column label="栏目排序" prop="sort" width="80px" align="center" />
        <el-table-column label="是否启用" prop="status" width="250px" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              active-text="正常"
              inactive-text="禁用"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
              @change="disableUser(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="250px">
          <template slot-scope="scope">
            <el-button type="primary" class="orange" size="mini" @click.stop="add(scope.row)">添加子栏目</el-button>
            <el-button class="edit" size="mini" @click.stop="editor(scope.row)">编辑</el-button>
            <el-button class="dele" size="mini" @click.stop="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
import columnApi from '@/api/column.js'
import websiteApi from '@/api/website.js'
import websetApi from '@/api/websetting'
export default {
  data() {
    return {
      dialogShow: false,
      orderData: [], // 文章分类列表
      options: [], // 站点列表
      value: '',
      website_id: '',
      searchForm: {
        website_id: ''
      },
      langList: '',
      activeName: '',
      addForm: {
        title: '',
        parent_id: 0,
        website_id: '',
        alias: '',
        module_id: '',
        list_tpl: '',
        detail_tpl: '',
        type: ''
      },
      // val: {
      //   status: 2
      // },
      siteId: ''
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val

      this.getLang()
    }
  },
  created() {
    // this.getWeblist()
    this.siteId = this.$store.getters.siteId

    if (this.siteId) {
      this.getLang()
    }
  },
  mounted() {

  },
  updated() {

  },
  methods: {
    disableUser(row) {
      const val = {
        id: row.id,
        title: row.title,
        parent_id: row.parent_id,
        website_id: row.website_id,
        alias: row.alias,
        module_id: row.module_id,
        list_tpl: row.list_tpl,
        detail_tpl: row.detail_tpl,
        type: row.type,
        lang: row.lang,
        status: ''
      }
      if (row.status == 1) {
        val.status = 1
      } else {
        val.status = 2
      }

      columnApi.columnUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取站点语言
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        this.activeName = res.data[0].lang
        this.getList()
      })
    },
    // tab切换
    handleClick(val) {
      this.activeName = val.name
      this.getList()
    },
    expandChange(row, index, e) {
      this.$refs.refTable.toggleRowExpansion(row)
    },
    // 切换单选按钮
    raidoChange(val) {

    },
    // 获取站点列表
    // getWeblist() {
    //   websiteApi.websiteList().then(res => {
    //
    //     this.options = res.data
    //     this.siteId = res.data[0].id
    //     this.getLang()
    //   })
    // },
    // handleChange(val) {
    //   this.siteId = val
    //   this.getLang()
    // },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该栏目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const val = {
          website_id: this.siteId,
          id: row.id,
          lang: this.activeName
        }
        columnApi.columnDelete(val).then(res => {
          if (res.code == 0) {
            this.$message.success('已删除')
            this.getList()
          } else {
            this.$message.error('删除失败')
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增一级
    goAdd() {
      this.$router.push({ name: 'addColumn', query: { pid: 0, website_id: this.siteId, lang: this.activeName }})
      // this.dialogShow = true
      // this.addForm.title = ''
      // this.addForm.alias = ''
      // this.addForm.module_id = ''
      // this.addForm.list_tpl = ''
      // this.addForm.type = ''
      // this.addForm.detail_tpl = ''
      // this.addForm.parent_id = 0
      // this.addForm.website_id = this.website_id
      // this.dialogShow = true
    },
    // 新增子级
    add(row) {
      this.$router.push({ name: 'addColumn', query: { pid: row.id, website_id: this.siteId, lang: this.activeName }})
    //   this.addForm.id = ''
    //   this.addForm.title = ''
    //   this.addForm.alias = ''
    //   this.addForm.module_id = ''
    //   this.addForm.list_tpl = ''
    //   this.addForm.type = ''
    //   this.addForm.detail_tpl = ''
    //   this.addForm.parent_id = row.id
    //   this.addForm.website_id = this.website_id
    //   this.dialogShow = true
    },
    // 编辑
    editor(row) {
      this.$router.push({ name: 'updateColumn', query: { id: row.id, website_id: row.website_id, lang: row.lang }})
      // columnApi.columnInfo({ id: row.id, website_id: row.website_id }).then(res => {
      //   const item = res.data
      //   this.addForm = {
      //     id: item.id,
      //     parent_id: item.parent_id,
      //     title: item.title,
      //     website_id: item.website_id,
      //     alias: item.alias,
      //     module_id: item.module_id,
      //     list_tpl: item.list_tpl,
      //     type: item.type,
      //     detail_tpl: item.detail_tpl
      //   }
      // })
      // this.dialogShow = true
    },
    // 提交
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (!this.addForm.id) {
            const val = {
              title: this.addForm.title,
              parent_id: this.addForm.parent_id,
              website_id: this.website_id,
              alias: this.addForm.alias,
              module_id: this.addForm.module_id,
              list_tpl: this.addForm.list_tpl,
              type: this.addForm.type,
              detail_tpl: this.addForm.detail_tpl
            }

            columnApi.columnSave(this.addForm).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // const val = {
            //   id: this.addForm.id,
            //   name: this.addForm.name,
            //   pid: this.addForm.pid,
            //   status: this.addForm.status
            // }
            columnApi.columnUpdate(this.addForm).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.dialogShow = false
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 栏目列表
    getList() {
      // this.website_id = this.siteId
      const val = {
        website_id: this.siteId,
        lang: this.activeName
      }

      columnApi.columnList(val).then(res => {
        this.orderData = res.data
      })
    }
    // // 禁用
    // disableUser(row) {
    //   columnApi.editcate({ id: row.id, status: row.status }).then(res => {
    //     if (res.code == 0) {
    //       this.$message.success(res.msg)
    //       this.getList()
    //     } else {
    //       this.$message.error(res.msg)
    //     }
    //   })
    // }
    // handleAvatarSuccess(res, file) {
    //   if (res.code == -200 || res.code == 0) {
    //     this.addForm.logo = res.data[0].path
    //     this.imageUrl = URL.createObjectURL(file.raw)
    //   }
    // },
    // beforeAvatarUpload(file) {
    //   const isJPG = file.type === 'image/jpeg'
    //   const isPNG = file.type === 'image/png'
    //   const isLt2M = file.size / 1024 / 1024 < 2

    //   if (!isJPG && !isPNG) {
    //     this.$message.error('上传头像图片只能是 JPG或PNG 格式!')
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 2MB!')
    //   }
    //   return (isJPG || isPNG) && isLt2M
    // }

  }
}
</script>
<style lang='scss'>
.el-table__placeholder{
  width: 0;
}

#container
  .columnDialog{
    .el-form--inline .el-form-item__content{
      width: 410px;
    }
    .el-select{
      width: 410px;
    }
  }
  .tabs.el-tabs--card>.el-tabs__header .el-tabs__item{
  background-color: #eee;
  border: none;
  margin-right: 5px;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  background-color: #fff;
}
.tabs.el-tabs--card>.el-tabs__header .el-tabs__nav{
  border-radius: 0;
  border: none;
}
.tabs.el-tabs--card .el-tabs__header{
  margin: 0;
}
.tabs.el-tabs--card>.el-tabs__header{
  border-bottom: 0;
}

</style>
<style scoped lang='scss'>
.sort_icon{

  height: 30px;
  vertical-align: middle;
  border-radius: 5px;

}
.content{
  background-color: #fff;
  padding-top:20px ;

}
.el-table{
    margin-bottom: 20px;
}
.search{
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}
#app .comtainer .el-table thead tr, #app .container .el-table thead th{
    background-color: #fff;
}
//   .el-tree ::v-deep .el-tree-node__expand-icon.expanded
// {
//     // -webkit-transform: rotate(0deg);
//     // transform: rotate(0deg);
// }
// //有子节点 且未展开
// .el-table::v-deep .el-icon-arrow-right:before {
//   background: url('./images/add.png') no-repeat 0 3px;
//   content: '';
//   display: block;
//   width: 16px;
//   height: 16px;
//   font-size: 13px;
//   background-size: 16px;
// }
// //有子节点 且已展开
// .el-table::v-deep .el-table__expand-icon--expanded {
//   .el-icon-arrow-right:before {
//     background: url('./images/minus.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 16px;
//     height: 16px;
//     font-size: 13px;
//     background-size: 16px;
//   }
// }
// //没有子节点
// .el-tree ::v-deep.el-tree-node__expand-icon.is-leaf::before
// .el-table::v-deep.el-table__placeholder::before {
//   background: url('./images/minus.png') no-repeat 0 3px;
//   content: '';
//   display: block;
//   width: 16px;
//   height: 16px;
//   font-size: 13px;
//   background-size: 16px;
// }
</style>
